<template>
    <el-tabs class="tabs tab-condinner" v-model="activeTabName" @tab-remove="closeTab" type="border-card">
        <el-tab-pane v-for="item in tabList" :key="item.name" :name="item.name" :label="item.label" :closable="item.closable">
            <!-- <component :is="item.component"></component> -->
        </el-tab-pane>
        <div class="content-wrap">
          <router-view/>
        </div>
    </el-tabs>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    export default {
        name: "TabPanel",
        data() {
            return {
                home: {
                    label: '首页',
                    name: 'index',
                    disabled: false,
                    closable: false,
                    path: '/index'
                }
            }
        },
        mounted () {
            let tabData = this.$store.state.navTabs.tabList;
            let array = [];
            if(tabData.length < 1){
                this.$store.commit('navTabs/addTabs', this.home);
            }
            if (this.$route.path !== '/' && this.$route.path !== '/index') {
                tabData.forEach((item,key) => {
                    if(item.name === this.$route.name){
                        array.push(false)
                    }else{
                        array.push(true)
                    }
                });
                if(array.indexOf(false) < 0){
                    let obj = {
                        label: this.$route.meta.title,
                        name: this.$route.name,
                        disabled: false,
                        closable: true,
                        path:this.$route.path,
                    }
                    this.$store.commit('navTabs/addTabs', obj);  
                }
                this.$store.commit("navTabs/setActiveTabName", this.$route.name);
                this.$router.push({ path:this.$route.path})

            } else {
                this.$store.commit('navTabs/setActiveTabName', this.home.name);
            }
        },
        computed: {
            activeTabName: {
                get() {
                    return this.$store.state.navTabs.activeTabName;
                },
                set(value) {
                    let tabData = this.$store.state.navTabs.tabList;
                    tabData.forEach((item,key) => {
                        if(item.name === value){
                             this.$store.commit("navTabs/setActiveTabName", value);
                             this.$router.push({ path:item.path})
                        }
                    });
                   
                }
            },
            ...mapState('navTabs',[
                'tabList'
            ])
        },
        watch: {
            '$route'(to) {
                let tabData = this.$store.state.navTabs.tabList;
                let array = [];
                let obj = {
                    label: to.meta.title,
                    name: to.name,
                    disabled: false,
                    closable: true,
                    path:to.path,
                }
                tabData.forEach((item,key) => {
                    if(item.name === to.name){
                        array.push(false)
                    }else{
                        array.push(true)
                    }
                });

                if(array.indexOf(false) < 0){
                    this.$store.commit('navTabs/addTabs', obj);  
                }
                this.$store.commit("navTabs/setActiveTabName", to.name);
                // this.$router.push({ path:item.path})
            }
        },
        methods: {
            ...mapMutations('navTabs',[
                'addTabs','closeTab'
            ])
        }
    }
</script>

<style scope>
    .tab-condinner>.el-tabs__header {
        z-index: 4;
        height: 40px;
    }
    .tab-condinner>.el-tabs__content{
      padding: 15px 15px 40px 15px !important;
        
    }
    .content-wrap {

    }
</style>